<template>

    <el-form ref="ruleFormRef" style="max-width: 600px;margin:200px 500px" :model="ruleForm" :rules="rules"
        label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="用户名" width="20" prop="name">
            <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="密码" width="20" prop="pwd">
            <el-input v-model="ruleForm.pwd" type="password" />
        </el-form-item>
        <!-- <el-form-item label="验证码" prop="pwd">
            <el-input v-model="ruleForm.SCode" style="width: 200px; margin-right: 20px;" />
            <el-tag @click="createCode()" type="danger" style="font-size: 25px; height: 36px; cursor: pointer;">
                {{ ruleForm.KCode }}</el-tag>
        </el-form-item> -->

        <el-form-item label="验证码" prop="scode">
            <el-input v-model="ruleForm.scode" style="width: 120px; margin-right: 20px;" /> <el-tag type="danger"
                style="width: 60px;height: 40px; margin-right: 10px;">{{
                    ruleForm.kcode }}</el-tag> <el-button type="success" @click="createKCode()">
                刷新
            </el-button>
        </el-form-item>

        <el-form-item label="" width="20" prop="pwd">
            <el-checkbox :v-model="true">记住密码?ss</el-checkbox>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                登录
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import router from '@/router';

interface RuleForm {
    name: string
    pwd: string
    scode: string
    kcode: string
    // SCode: string,
    // KCode: string,
    // DaAn: string

}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: '',
    pwd: '',
    scode: '',
    kcode: ''
    // SCode: '',
    // KCode: '',
    // DaAn: ''
})

const createKCode = () => {
    var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
    var code = ''
    for (let index = 0; index < 4; index++) {
        var random = Math.floor(Math.random() * str.length)
        code = code + str[random]
    }
    ruleForm.kcode = code;
}

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '长度3-10', trigger: 'blur' },
    ],
    pwd: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
        },
        // {pattern:'//',message:"不满足正则表达式"}
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    // if (ruleForm.KCode.toLowerCase() != ruleForm.SCode.toLowerCase()) {
    //     // createCode();
    //     ElMessage.error("请输入正确的验证码!");
    //     return;
    // }

    if (ruleForm.scode.toUpperCase() != ruleForm.kcode.toUpperCase()) {
        ElMessage.error("验证码输入不正确!");
        return;
    }

    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.get('http://localhost:5015/api/Account/Login', { params: { Name: ruleForm.name, Pass: ruleForm.pwd } }).then(res => {
                if (res.data.data == 1) {//登录成功,把jwt token保存起来

                    window.localStorage.setItem("token", res.data.msg);

                    ElMessage.success(localStorage.getItem("token"));
                    router.push('/shouye');
                } else {
                    ElMessage.error(res.data.msg);
                }

            });


        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))

// const createCode = () => {
//     const str = '123456789abcdefghijkmpqrstuvwxyzABCDEFGHIJKMNPQRSTUVWXYZ'
//     console.log(str);
//     let code = '';

//     for (var i = 0; i < 6; i++) {
//         code += str[Math.floor(Math.random() * str.length)]
//         console.log(code);
//     }
//     ruleForm.KCode = code;

// }


// const createCode = () => {
//     // 要给KCode赋值  AxB=?  ,同时还要产生答案

//     let A = Math.floor(Math.random() * 10)
//     let B = Math.floor(Math.random() * 10)
//     let C = Math.floor(Math.random() * 4)
//     C = 3;
//     // ruleForm.KCode = A+C+B+'=?'
//     switch (C) {
//         case 0:
//             ruleForm.DaAn = (A + B).toString();
//             ruleForm.KCode = A + '+' + B + '=?'
//             break;
//         case 1:
//             ruleForm.DaAn = (A - B).toString();
//             ruleForm.KCode = A + '-' + B + '=?'
//             break;
//         case 2:
//             ruleForm.DaAn = (A * B).toString();
//             ruleForm.KCode = A + 'x' + B + '=?'
//             break;
//         case 3:
//             if (B == 0) {
//                 B = 1;
//             }
//             A = A * B;
//             ruleForm.DaAn =  (A / B).toString();
//             ruleForm.KCode = A + '÷' + B + '=?'
//             break;

//     }


// }

onMounted(() => {
    // createCode();
    createKCode();
})
</script>